<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11_jQuery-元素的选择器</title>
    <!-- 
   在 jQuery 中，选择器是用于查找和操作 DOM 元素的重要工具。jQuery 提供了丰富的选择器，允许开发者以简洁的方式选择、遍历和操作页面中的元素。
  一、基本选择器
  1. ID 选择器
  使用  `#`  符号选择具有特定 ID 的元素。
  $('#myElement'); // 选择 ID 为 myElement 的元素
  2. 类选择器

  使用  `.`  符号选择具有特定类名的元素。
  $('.myClass'); // 选择类名为 myClass 的所有元素
  3. 标签选择器

  直接使用标签名称选择所有指定标签的元素。
  $('div'); // 选择所有 <div> 元素
  二、组合选择器
  1. 后代选择器
  选择指定元素内的所有后代元素。
  $('#parent .child'); // 选择 ID 为 parent 的元素内的所有类名为 child 的元素
  2. 子元素选择器

  选择指定元素的直接子元素。
  $('#parent > .child'); // 选择 ID 为 parent 的元素的直接子元素类名为 child 的元素
  3. 相邻兄弟选择器

  选择指定元素后面紧接着的兄弟元素。
  $('.sibling + .nextSibling'); // 选择类名为 sibling 的元素后面的第一个类名为 nextSibling 的兄弟元素
  4. 所有兄弟选择器

  选择所有兄弟元素。
  $('.sibling ~ .otherSiblings'); // 选择类名为 sibling 的元素后面的所有类名为 otherSiblings 的兄弟元素
  三、属性选择器

  1. 选择具有特定属性的元素
  $('input[type="text"]'); // 选择所有 type 属性为 text 的 <input> 元素
  2. 选择具有特定属性值的元素
  $('a[href="https://www.example.com"]'); // 选择所有 href 属性为 https://www.example.com 的 <a> 元素
  3. 选择具有特定属性的元素（不考虑值）
  $('[data-custom]'); // 选择所有具有 data-custom 属性的元素
  四、伪类选择器

  1. :first

  选择第一个匹配的元素。
  $('li:first'); // 选择第一个 <li> 元素
  2. :last

  选择最后一个匹配的元素。
  $('li:last'); // 选择最后一个 <li> 元素
  3. :eq(index)

  选择指定索引的元素（从 0 开始）。
  $('li:eq(2)'); // 选择第三个 <li> 元素
  4. :even / :odd

  选择偶数或奇数索引的元素。
  $('li:even'); // 选择所有偶数索引的 <li> 元素
  $('li:odd'); // 选择所有奇数索引的 <li> 元素
  5. :not(selector)

  选择不匹配指定选择器的元素。
  $('div:not(.excluded)'); // 选择所有不具有类名 excluded 的 <div> 元素
  五、总结
  - jQuery 提供了丰富的选择器，使得选择和操作 DOM 元素变得简单直观。
  - 选择器包括基本选择器（ID、类、标签）、组合选择器（后代、子元素、相邻兄弟、所有兄弟）、属性选择器和伪类选择器。
  - 通过组合使用这些选择器，可以高效地定位和操作页面中的元素。
  --></head>
  <body>
    <ul id="list">
      <li class="li-1">li-1</li>
      <li class="li-2">li-2</li>
      <li class="li-3">li-3</li>
      <li class="li-4">li-4</li>
      <li class="li-5">li-5</li>
    </ul>

    <script src="../libs/jquery-3.6.0.js"></script>
    <script>
      // 1. 基本选择器
      // 1.1 id选择器
      // $("#list").css("background-color", "red")
      // 1.2 类选择器
      // $(".li-1").css("background-color", "red")
      // 1.3 元素选择器
      // $("li").css("background-color", "red")
      // 1.4 通配符选择器
      // $("*").css("background-color", "red")

      // 2. 层级选择器
      // 2.1 后代选择器
      // $("ul li").css("background-color", "red")
      // 2.2 子代选择器
      // $("ul > li").css("background-color", "red")
      // 2.3 相邻兄弟选择器
      // $(".li-1 + li").css("background-color", "red")
      // 2.4 通用兄弟选择器
      // $(".li-1 ~ li").css("background-color", "red")

      // 3. 属性选择器
      // 3.1 [attribute]
      // $("li[class]").css("background-color", "red")
      // 3.2 [attribute=value]
      // $("li[class='li-1']").css("background-color", "red")
      // 3.3 [attribute!=value]
      // $("li[class!='li-1']").css("background-color", "red")

      // 4. 伪类选择器
      // 4.1 :first
      // $("li:first").css("background-color", "red")
      // 4.2 :last
      // $("li:last").css("background-color", "red")
      // 4.3 :even
      // $("li:even").css("background-color", "red")
      // 4.4 :odd
      // $("li:odd").css("background-color", "red")
      // 4.5 :eq(index)

      // 5. 额外扩展的选择器
      // 5.1 :contains(text)
      // $("li:contains('li-1')").css("background-color", "red")
      // 5.2 :has(selector)
      // $("li:has('span')").css("background-color", "red")
      // 5.3 :empty
      // $("li:empty").css("background-color", "red")
      // 5.4 :parent
      // $("li:parent").css("background-color", "red")
      // 5.5 :hidden
      // $("li:hidden").css("background-color", "red")
      // 5.6 :visible
      // $("li:visible").css("background-color", "red")
      // 5.7 :animated
      // $("li:animated").css("background-color", "red")
      // 5.8 :focus
      // $("input:focus").css("background-color", "red")
      // 5.9 :checked
      // $("input:checked").css("background-color", "red")
      // 5.10 :selected
      // $("select option:selected").css("background-color", "red")
      // 5.11 :not(selector)
      // $("li:not(:contains('li-1'))").css("background-color", "red")
      // 5.12 :first-child
      // $("li:first-child").css("background-color", "red")
      // 5.13 :last-child
      // $("li:last-child").css("background-color", "red")

      // document.querySelector('ul li:eq(1)') // 不会生效
      // console.log($('ul li:eq(1)'))
      // console.log($('ul li:first') )
      // console.log($('ul li:last') )

      // console.log($('ul li:odd') )
      // console.log($('ul li:even') )
    </script>
  </body>
</html>
